जावास्क्रिप्ट की 70 पंक्तियों के साथ एक साधारण पोकेमॉन गेम को फिर से बनाएं

परिचय

"वह पोकेमॉन कौन है?" ज्यादातर लोगों के लिए यादें लाना चाहिए। यदि आप नहीं जानते कि यह किस बारे में है तो मैं आपको सलाह दूंगा कि आप ऐश केचम और उसके पोकेमोन मित्र पिकाचु के कारनामों की तलाश करें।

इस पोस्ट में, मैं आपको दिखाऊंगा कि HTML, CSS और जावास्क्रिप्ट के साथ एक साधारण पोकेमॉन अनुमान लगाने वाला गेम कैसे बनाया जाता है। यह गेम पूरी तरह से "हू इज दैट पोकेमॉन?" पर आधारित है। पोकेमॉन एनीमे श्रृंखला से। आप खुद को याद दिला सकते हैं कि यह यहां कैसा दिखता है।

यह एक साधारण खेल है, इसमें जावास्क्रिप्ट कोड की 70 पंक्तियों के ठीक नीचे है। आप देख सकते हैं कि यह कैसा दिखता है और इसे यहाँ आज़माएँ । मैं आपको यह भी सिखाऊंगा कि आप इसे मुफ्त में कैसे तैनात कर सकते हैं। यह गेम एक आदर्श परियोजना विचार है जिसे आप सुधार सकते हैं और अपने पोर्टफोलियो में जोड़ सकते हैं।

मैं आपको इस पोस्ट में ज्यादा जावास्क्रिप्ट नहीं सिखाऊंगा, आप इसे मुफ्त में ऑनलाइन उपलब्ध कई मुफ्त ट्यूटोरियल से सीख सकते हैं। हालाँकि, मैं सिखाऊँगा कि इस तरह का खेल बनाने के लिए किन आवश्यक कदमों की आवश्यकता है।

कैसे शुरू करें?

आइए कल्पना करें कि आपको यह स्कूल में एक असाइनमेंट के रूप में या अपने काम पर एक कार्य के रूप में मिला है। किसी ने आपको अभी ऊपर से एक वीडियो दिखाया है और आपको उसे फिर से बनाना होगा। आप भी कैसे शुरू करेंगे?

खैर, सबसे पहले आपको यह जांचना होगा कि आपके पास कौन सा डेटा होना चाहिए।

इस मामले में, आपके पास प्रत्येक स्प्राइट के लिए पोकेमॉन नाम के साथ पोकेमॉन स्प्राइट्स की एक सूची होनी चाहिए। आपको आमतौर पर ऐसा डेटा कुछ डेटाबेस, सीएसवी, या एक्सेल फाइलों से मिलता है। एक अन्य विकल्प यह जांचना है कि क्या कोई पोकेमॉन एपीआई है जो वह सब प्रदान करता है।

सौभाग्य से हमारे लिए, एक पोकेएपीआई है जो मुफ़्त है और हमें वह सब कुछ प्रदान करता है जो हमें चाहिए। उनकी वेबसाइट पर आप एपीआई दस्तावेज पा सकते हैं और आप एपीआई का परीक्षण भी कर सकते हैं। एप्लिकेशन शुरू होने पर हम केवल एक एपीआई कॉल करना चाहते हैं। उस कॉल का परिणाम हम चर में सहेजेंगे और पूरी अवधि के दौरान इसका इस्तेमाल करेंगे।

सुझाव के साथ आइये

अब जब आप जानते हैं कि आपके पास सभी आवश्यक डेटा आसानी से उपलब्ध हैं, तो आपको यह जांचना होगा कि आपके एप्लिकेशन में कौन-सी विशेषताएं होनी चाहिए। इसे कार्यात्मक आवश्यकताएं कहा जाता है। आप उन्हें लिख लें और फिर आपने जो लिखा है उस पर अमल करना शुरू कर दें। तो इस आवेदन के लिए कार्यात्मक आवश्यकताएं होंगी:

• एपीआई से सभी पोकेमोन डेटा प्राप्त करें
• एक यादृच्छिक पोकेमोन के स्प्राइट की छाया दिखाएं
• खिलाड़ी के सही अनुमानों की वर्तमान लकीर दिखाएं
• खिलाड़ी को इनपुट क्षेत्र में नाम लिखकर और एंटर कुंजी दबाकर पोकेमॉन के नाम का अनुमान लगाने में सक्षम होना चाहिए।
• यदि खिलाड़ी ने सही अनुमान लगाया है, तो स्ट्रीक को एक से बढ़ा दें, अन्यथा स्ट्रीक को शून्य पर रीसेट कर दें
• एक अनुमान लगाने के बाद, पोकेमॉन का स्प्राइट दिखाकर और उसका नाम प्रिंट करके प्रकट करें कि पोकेमॉन क्या है
• पहले चरण को छोड़कर उपरोक्त सभी चरणों को दोहराएं

आप गैर-कार्यात्मक आवश्यकताओं की एक सूची भी बना सकते हैं:

• एक पृष्ठभूमि छवि ढूंढें या बनाएं जो एनीमे में पृष्ठभूमि के समान हो
• पोकेमॉन फॉन्ट के समान एक फॉन्ट ढूंढें
• इनपुट फॉर्म में कुछ CSS स्टाइल जोड़ें

कार्यान्वयन

जैसा कि आप देख सकते हैं, आवेदन बहुत सरल है। आप एक यादृच्छिक पोकेमोन की स्प्राइट छाया दिखाते हैं, खिलाड़ी को अनुमान लगाने दें, और फिर स्ट्रीक काउंटर को बढ़ाएं या रीसेट करें। और अंतिम चरण के लिए पोकेमोन दिखाएं और उसके बाद एक नया प्राप्त करें।

अपना पसंदीदा टेक्स्ट एडिटर खोलें। मुझे विजुअल स्टूडियो कोड (वीएस कोड) का उपयोग करना पसंद है। तीन फाइलें बनाएं - " index.html ", " style.css ", और " action.js "। तीनों फाइलों को एक ही फोल्डर में रखें। index.html खोलें और इसे इनिशियलाइज़ करें। वीएस कोड में आप इसे केवल टाइप करके कर सकते हैं! और फिर टैब की को दबाएं। यदि आप VS कोड का उपयोग नहीं कर रहे हैं और यह नहीं जानते हैं कि HTML फ़ाइल को इनिशियलाइज़ कैसे करें तो आप इसे यहाँ देख सकते हैं । उसके बाद बस हेड टैग के अंदर CSS और JS फाइलों के लिंक जोड़ें।

बॉडी टैग के अंदर, आपको एक इमेज टैग जोड़ने की जरूरत है जहां स्प्राइट्स दिखाए जाएंगे, एक इनपुट फ़ील्ड उपयोगकर्ता के लिए अनुमान लगाने के लिए, और एक स्पैन फ़ील्ड सही अनुमान स्ट्रीक प्रदर्शित करने के लिए। उनमें से प्रत्येक टैग में एक अद्वितीय आईडी संपत्ति होनी चाहिए। हम अभी के लिए HTML के साथ काम कर रहे हैं, यहां बताया गया है कि इसे अब तक कैसा दिखना चाहिए:

 <!DOCTYPE html> <html lang="en"> <head> <!--For implementation details visit marinsborg.com--> <meta charset="UTF-8"> <meta http-equiv="X-UA-Compatible" content="IE=edge"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <script src="action.js" defer></script> <link rel="stylesheet" href="style.css"> <title>Who's that Pokemon?</title> </head> <body> <img id="sprite"> <input type="text" placeholder="Who's that Pokemon?" id="guess"> <br> <span id="streak">Streak: 0</span> </body> </html>

अब एक्शन.जेएस फाइल पर ध्यान देते हैं। खेल का पूरा तर्क है। गिटहब पर, आप मेरी action.js फ़ाइल देख सकते हैं जहां मैंने लगभग हर पंक्ति पर टिप्पणी की है कि यह क्या करता है। इसलिए मैं यहाँ पंक्ति दर पंक्ति व्याख्या नहीं करने जा रहा हूँ।

जैसा कि आप फ़ाइल में देख सकते हैं, आधार URL के साथ PokeAPI अतिरिक्त तर्क "सीमा" और "ऑफ़सेट" ले सकता है। इस तरह आप चुन सकते हैं कि एपीआई प्रतिक्रिया में आप कौन सा पोकेमोन प्राप्त करना चाहते हैं और उनमें से कितने। मैंने ऑफसेट को 0 पर सेट किया और 150 तक सीमित किया, इसलिए मुझे हमेशा पहली पीढ़ी से केवल पोकेमॉन ही मिलेगा। आप जैसे चाहें इसे बदल सकते हैं।

जैसा कि आप ऊपर की छवि में देख सकते हैं - एपीआई वस्तुओं की एक सरणी लौटाएगा और प्रत्येक वस्तु में पोकेमॉन नाम और URL होता है जिसे आप उस पोकेमॉन के बारे में अधिक जानकारी प्राप्त करने के लिए खोल सकते हैं। पोकेमोन को उनके पोकेडेक्स नंबर द्वारा क्रमबद्ध किया जाता है हालांकि एक सरणी के अंदर उनकी संख्या एक से कम हो जाती है क्योंकि सरणी शून्य से शुरू होती है। यह एकमात्र एपीआई कॉल है जिसे आपको करने की आवश्यकता है।

जावास्क्रिप्ट में, आप एक एपीआई को कई तरीकों से कॉल कर सकते हैं। मैंने फ़ेच फ़ंक्शन का उपयोग किया। एक बार जब डेटा एपीआई से प्राप्त किया जाता है और एक चर में सहेजा जाता है, तो खेल शुरू हो सकता है।

गेम की शुरुआत getPokemon() फंक्शन से होती है। उस फ़ंक्शन का उपयोग उपयोगकर्ता द्वारा अनुमान लगाने पर हर बार एक नया पोकेमॉन उत्पन्न करने के लिए भी किया जाता है। तो उस फ़ंक्शन की शुरुआत में, नया पोकेमॉन बनाने से पहले कुछ सफाई की आवश्यकता होती है।

पोकेमॉन बनाना सरल है - एक यादृच्छिक संख्या प्राप्त करें, पोकेमॉन नाम प्राप्त करें और उस संख्या के साथ स्प्राइट करें और इसे चर में सहेजें। उसके बाद URL को स्प्राइट करने के लिए img src प्रॉपर्टी सेट करके और CSS प्रॉपर्टी ब्राइटनेस को शून्य पर सेट करके पोकेमॉन की छाया दिखाएं।

उसके बाद एप्लिकेशन तब तक कुछ नहीं करता जब तक उपयोगकर्ता एंटर कुंजी दबाता है। आपको इनपुट फ़ील्ड में एक ईवेंट श्रोता जोड़ना चाहिए जो जांच करेगा कि एंटर कुंजी दबाई गई है या नहीं और यदि यह एक फ़ंक्शन है तो checkGuess() को कॉल किया जाएगा।

checkGuess() फ़ंक्शन उपयोगकर्ता के अनुमान के आधार पर स्ट्रीक मान को बढ़ाता या रीसेट करता है और showPokemon() फ़ंक्शन को कॉल करता है। showPokemon() एचटीएमएल पर स्ट्रीक वैल्यू को अपडेट करता है, पोकेमॉन के स्प्राइट को दिखाता है और पोकेमॉन का नाम दिखाता है। 2 सेकंड के बाद, getPokemon() फ़ंक्शन को कॉल किया जाएगा और पूरी प्रक्रिया फिर से शुरू हो जाएगी। और यही है।

स्टाइल

ठीक है, अब इस खेल में कुछ शैली जोड़ने का समय आ गया है, इसलिए यह वीडियो के समान दिखता है। जैसा कि आप पहले से ही जानते हैं कि CSS का उपयोग स्टाइलिंग के लिए किया जाता है। आप मेरी सीएसएस फ़ाइल देख सकते हैं, इसमें बहुत कुछ नहीं है। और मुझे पूरा यकीन है कि आप इसे मुझसे बेहतर तरीके से स्टाइल कर सकते हैं। आखिरकार, मैं सिर्फ एक बैकएंड डेवलपर हूं।

मुझे एक पृष्ठभूमि छवि मिली जिसे आप यहां देख और डाउनलोड कर सकते हैं। मुझे एक फॉन्ट भी मिला जो पोकेमोन फॉन्ट के समान है। आप इसे मेरे भंडार से भी डाउनलोड कर सकते हैं। पृष्ठभूमि छवि सेट करना आसान है - सीएसएस फ़ाइल के अंदर आपको छवि के पथ के साथ बॉडी टैग में संपत्ति 'पृष्ठभूमि-छवि' जोड़ने की आवश्यकता है।

स्प्राइट हमेशा स्क्रीन के बाईं ओर दिखाया जाता है, जबकि टेक्स्ट और पोकेमॉन नाम दाईं ओर दिखाया जाता है। ऐसा प्रभाव बनाने के लिए जो सिर्फ दो कॉलम हैं आप flexbox का उपयोग कर सकते हैं। HTML के अंदर आपको एक "पंक्ति" वर्ग के साथ एक पैरेंट डिव जोड़ने की जरूरत है और उस डिव के अंदर, आपको एक क्लास "कॉलम" के साथ दो डिव जोड़ने होंगे।

CSS में कस्टम फॉन्ट लोड करना भी आसान है। @ फॉन्ट-फेस के साथ आप फॉन्ट का नाम और फॉन्ट का पथ सेट करते हैं। उसके बाद आप उस फॉन्ट को उसके नाम के साथ इस्तेमाल कर सकते हैं। उस फ़ॉन्ट का उपयोग शैली के लिए करें "वह पोक्मोन कौन है?" स्क्रीन के दाईं ओर और पोकेमॉन के नाम का खुलासा होने पर भी।

आप इनपुट फ़ील्ड को स्टाइल कर सकते हैं और अपनी पसंद के अनुसार स्ट्रीक कर सकते हैं, मैंने अभी इनपुट फ़ील्ड और संरेखित टेक्स्ट में गोल कोनों को जोड़ा है। मैंने आकार भी बदल दिया। आप जांच सकते हैं कि आपको क्या पसंद है या आप मेरे मूल्य का उपयोग कर सकते हैं।

आखिरी चीज जो आपको जोड़ने की जरूरत है वह है मोबाइल उपकरणों के लिए स्टाइलिंग। इसे @media नियम के साथ जोड़ा जाता है, जहां आप नई CSS गुण सेट करते हैं यदि ब्राउज़र विंडो 500px चौड़ी या उससे कम है। वहां आपको बदलने की जरूरत है कि कॉलम पंक्तियों के रूप में दिखाए जाते हैं, फोंट के आकार को कम करते हैं और इनपुट फ़ील्ड की चौड़ाई बढ़ाते हैं। और वह स्टाइल के लिए है। जैसा कि मैंने कहा, आप इसे मेरी तुलना में बहुत बेहतर कर सकते हैं, यह वीडियो के समान दिखने के लिए न्यूनतम आवश्यक है।

अगले कदम

इस ट्यूटोरियल में, मैंने आपको दिखाया कि "हूज़ दैट पोकेमॉन?" को कैसे लागू किया जाए? एचटीएमएल, सीएसएस और जावास्क्रिप्ट के साथ खेल। अगर आप किसी हिस्से में फंस गए हैं तो आप action.js फ़ाइल के अंदर टिप्पणियां पढ़ सकते हैं, या मुझसे यहां या ट्विटर पर पूछ सकते हैं। नई पोस्ट के लिए आप मुझे वहां फॉलो भी कर सकते हैं।

अभ्यास के लिए, आप इस खेल को बेहतर बनाने और इसे अद्वितीय बनाने के लिए कुछ नई सुविधाओं को लागू कर सकते हैं। उदाहरण के लिए:

• उन बटनों को जोड़ें जिन पर क्लिक करके उपयोगकर्ता पोकेमॉन की पीढ़ियों को अनुमान लगाने के लिए बदल सकते हैं
• एक फ़ंक्शन जोड़ें जो एक आवाज बजाएगा "वह पोकेमॉन कौन है?" पहली बार खेल लोड किया गया है।
• एक नया वेरिएबल बनाएं जो एक उच्च स्कोर दिखाएगा।
• एक टाइमर जोड़ें जो नए पोकेमॉन प्राप्त करने के बीच उलटी गिनती करेगा

ऐसे बहुत से विचार हैं जिन पर आप अमल कर सकते हैं, इस तरह आपको कुछ नया अनुभव मिलेगा और आप नई चीजें सीखेंगे।

एक बार जब आप कर लेते हैं, तो आप आसानी से इस गेम को मुफ्त में तैनात कर सकते हैं ताकि आप इसे अपने पोर्टफोलियो या अपने सीवी में दिखा सकें। बस इस सरल गाइड का पालन करें।

यहाँ भी प्रकाशित हो चुकी है।.